import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Grid, Button } from '@icedesign/base';
import { Feedback } from '@icedesign/base';
const { Row, Col } = Grid;
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
import { UploadService, SettingService } from '../../services'

export default class Detail extends Component {
  static displayName = 'Detail';

  constructor(props) {
    super(props);
    this.state = {
      value : BraftEditor.createEditorState('')
    };
  }

  componentDidMount = async() =>{
    let value = await SettingService.getAbout()
    if(value && value.value){
      this.setState({value : BraftEditor.createEditorState(value.value)})
    }
  }

  handleUpload = async(param) =>{
    let response = await UploadService.upload(param.file)
    param.success({
      url: response.filename
    })
  }

  handleChange = (value) =>{
    this.setState({value})
  }

  submit = async() => {
    await SettingService.setAbout(this.state.value.toHTML())
    Feedback.toast.success('保存成功')
    this.componentDidMount()
  };

  render() {
    return (
      <div className="change-password-form">
        <IceContainer>
          <div style={styles.formContent}>
            <h2 style={styles.formTitle}>关于</h2>
            <Row wrap style={styles.formItem}>
              <BraftEditor value={this.state.value} height={500} contentFormat={'html'}
                onChange={this.handleChange} media={{image : true,video : false,audio : false,uploadFn : this.handleUpload}}/>
            </Row>
          </div>

          <Row wrap style={{ marginTop: 20 }}>
            <Col xxs={{ offset: 6 }} s={{ offset: 3 }}>
              <Button size="large" type="primary" onClick={this.submit} >
                提 交
              </Button>
            </Col>
          </Row>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  formContent: {
    width: '100%',
    position: 'relative',
  },
  formItem: {
    marginBottom: 25,
  },
  formLabel: {
    height: '32px',
    lineHeight: '32px',
    textAlign: 'right',
  },
  formTitle: {
    margin: '0 0 20px',
    paddingBottom: '10px',
    borderBottom: '1px solid #eee',
  },
};
